<template>
  <section class="modlude">
    <el-form :inline="true" :model="formSearch" class="form_inline" label-width="90px">
      <!-- <el-form-item label="所属组织" size="small">
            <el-cascader
                ref="cascader"
                v-model="option1"
                :options="dataTree"
                :props="defaultProps2"
                @change="handleChange"
                clearable
              >
              </el-cascader>
          </el-form-item> -->
      <el-form-item label="所属项目" size="small">
        <el-select v-model="formSearch.projectId" placeholder="请选择项目">
          <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="部门" size="small">
          <el-select v-model="formSearch.status" placeholder="请选择部门">
            <el-option label="全部" :value="''"></el-option>
            <el-option label="物业" :value="1"></el-option>
          </el-select>
        </el-form-item> -->
      <!-- <el-form-item label="选择部门" size="small" prop="department">
          <el-cascader
              ref="cascader1"
              v-model="option2"
              :options="dataTree"
              :props="defaultProps2"
              @change="handleChange1"
            >
            </el-cascader>
        </el-form-item> -->
      <el-form-item label="姓名" size="small">
        <el-input v-model="formSearch.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" size="small">
        <el-input v-model="formSearch.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item size="small">
        <!-- v-if="$root.btnControl.find(item=>item=='view')" -->
        <el-button size="small"  @click="getlist">查 询</el-button>
      </el-form-item>
      <!-- <el-form-item>
          <el-button size="small" @click="">重 置</el-button>
        </el-form-item> -->
      <el-form-item size="small">
        <!-- v-if="$root.btnControl.find(item=>item=='add')" -->
        <el-button size="small"  @click="addDialog = true"><i
            class="el-icon-plus"></i> 新 增</el-button>
      </el-form-item>
      <!-- <el-form-item>
          <el-button size="small" @click="">导 出</el-button>
        </el-form-item> -->
    </el-form>
    <el-table :data="formData" style="width: 100%">

      <el-table-column prop="projectName" label="所属项目"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          {{scope.row.sex==0?'男':"女"}}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width=310>
        <template slot-scope="scope">
          <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
          <el-button type="warning" size="small"  @click="xiugai(scope.row,2)">
            修 改</el-button>
            <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
          <el-button type="danger" size="small" 
            @click="daleteInfo(scope.row.id)">删 除</el-button>
          <el-button type="" size="small"  @click="xiugai(scope.row,3)">
            详 情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <paging @changePage=handleCurrentPage :get-total='total'></paging>

    <!-- 新增 -->
    <el-dialog :title="Addoredit==1?'新增':Addoredit==2?'修改':'详情'" :visible.sync="addDialog" @close="canceladd"
      :close-on-click-modal="false">
      <div class="cont_box_right">
        <el-form label-position="right" :rules="rules" label-width="100px" :model="formPush" ref='ywrylist'>

          <el-form-item label="选择项目" size="small" prop="projectId">
            <el-select @change="" v-model="formPush.projectId" placeholder="请选择项目">
              <el-option v-for="(item,index) in xqTree" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="name" size="small">
            <el-input v-model="formPush.name" disabled placeholder="请输入姓名"></el-input>
            <el-button style="margin-top: 1px;" class="button-new-tag" size="small" @click="gettyyygList"><i
                class="el-icon-plus"></i> 选择已有员工</el-button>
          </el-form-item>
          <el-form-item label="手机号码" size="small" prop="phone">
            <el-input v-model="formPush.phone" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="性别" size="small" prop="sex">
            <el-select v-model="formPush.sex" placeholder="请选择性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
              <el-option label="未知" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="部门" size="small" prop="department" >
              <el-input  v-model="formPush.department" disabled placeholder="请输入部门"></el-input>
            </el-form-item> -->
          <el-form-item label="部门" size="small" prop="department">
            <el-select v-model="formPush.department" placeholder="请选择部门">
              <el-option v-for="(item,index) in bumendata" :label="item.name" :value="item.name" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司" size="small" prop="company">
            <el-input v-model="formPush.company" placeholder="请输入公司"></el-input>
          </el-form-item>
          <el-form-item label="地址" size="small" prop="address">
            <el-input v-model="formPush.address" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" size="small" prop="idNumberType">
            <el-select v-model="formPush.idNumberType" placeholder="请选择证件类型">
              <el-option label="身份证" :value="0"></el-option>
              <el-option label="港澳通行证" :value="1"></el-option>
              <el-option label="护照" :value="2"></el-option>
              <el-option label="其它" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" size="small" prop="identity">
            <el-input v-model="formPush.identity" placeholder="请输入证件号码"></el-input>
          </el-form-item>
          <el-form-item label="年龄" size="small" prop="age">
            <el-input v-model="formPush.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="备注" size="small" prop="remark">
            <el-input v-model="formPush.remark" placeholder="请输入备注"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <div class="dialog-footer" style="text-align: center;">
        <el-button size="medium " v-if="Addoredit == 3" @click="canceladd">关 闭</el-button>
        <el-button size="medium " v-else @click="addList">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 选择人员 -->
    <el-dialog width="50%" title="选择人员" :visible.sync="xcryDialog" @close="closeey" :close-on-click-modal="false">
      <el-form :inline="true" :model="formSearch1" class="form_inline">
        <el-form-item label="所属组织" size="small">
          <el-cascader ref="cascader" v-model="option1" :options="dataTree" :props="defaultProps2"
            @change="handleChange" clearable>
          </el-cascader>
        </el-form-item>

        <el-form-item label="账号" size="small">
          <el-input v-model="formSearch1.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" size="small">
          <el-input v-model="formSearch1.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" size="small">
          <el-input v-model="formSearch1.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small"  @click="gettyyygList">查 询</el-button>
          <!-- <el-button size="medium " @click="addDialog = true,imageUrl = '',isAddUpdata=1" v-if="$root.btnControl.find(item=>item=='add')">新 增</el-button> -->
        </el-form-item>
      </el-form>
      <el-table :data="formData1" style="width: 100%" stripe>
        <el-table-column width="25">
          <template slot-scope="scope">
            <el-radio @change='changeRadiorow(scope.row)'
              v-model="formPush.managerId" :label="scope.row.id" style="color:transparent;"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <!-- <el-table-column prop="avatar" label="头像" width="100">
                        <template slot-scope="scope">
                  <el-image style="width: 70px; height: 70px" :src="scope.row.avatar" fit="cover"></el-image>
                        </template>
              </el-table-column> -->
        <el-table-column prop="orgName" label="所属组织"></el-table-column>
        <el-table-column prop="phone" label="号码"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{scope.row.sex==2?"女":scope.row.sex==1?"男":'未知'}}
          </template>
        </el-table-column>
        <el-table-column prop="position" label="职位"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.status==1?"启用":'禁用'}}
          </template>
        </el-table-column>
      </el-table>
        <paging1 @changePage=handleCurrentPage3 :get-total='total3'></paging1>
      
      <div slot="footer" class="dialog-footer">
        <el-button size="medium " @click="yuangongqd">确 定</el-button>
      </div>

    </el-dialog>


  </section>
</template>

<script>
  import paging from "../paging"
     import paging1 from "../paging"
  import { xcupdInvestigators,xcdeleteInvestigators, xcgetInvestigatorsList, xcaddInvestigators, userListPage, xqSelectList, orgTree } from '../../url/api';
  export default {
    data() {
      return {
        Addoredit: 1,
        option1: [],
        option2: [],
        xqTree: [],
        formSearch: {
          current: 1,
          size: 10,
          roleType: 1,
        },
        formSearch1: {
          current: 1,
          size: 10,
          name:'',
          mobile:'',
          roles:'patrol',
        },
        option1: [],
        defaultProps2: {
          children: 'children',
          label: 'name',
          value: 'id',
          expandTrigger: 'hover', checkStrictly: true
        },
        formData: [],//数据
        formData1: [],//数据
        xunchadianData: [],//巡查点数据
        total: 0,//数据总数
        total3: 0,//数据总数
        pages: 0,//页面总数
        dataTree: [],
        addDialog: false,//新增标识
        xcryDialog: false,//巡更点标识
        formPush: {//新增表单
          roleType: 1,
          //department:"外包"
          name: '',
          phone: '',
          identity: '',
          sex: '',
          idNumberType: '',
          projectId: '',
          department: '',
          company: '',
          address: '',
          age: '',
          managerId:'',
        },
        bumendata: [
          { 'name': "外包" }
        ],
        yuangongdata: {
          managerId:''
        },
        formxungengdian: {
          current: 1,
          size: 5,
          type: 1
        },
        managerId: "",//员工id
        dynamicTags: [],//tag
        rules: {
          name: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          phone: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          identity: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          sex: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          idNumberType: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          projectId: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          // department: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          // company: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          // address: [{ required: true, message: '该项不能为空', trigger: 'change' }],
          // age: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        },
      }
    },
    methods: {
      xiugai(row, index) {
        this.Addoredit = index
        console.log(row);
        this.formPush.projectId = row.projectId
        this.formPush.name = row.name
        this.formPush.phone = row.phone
        this.formPush.sex = row.sex
        this.bumendata = [
          {
            'name': row.department
          }
        ];
        this.formPush.department = row.department
        this.formPush.company = row.company
        this.formPush.address = row.address
        this.formPush.idNumberType = row.idNumberType
        this.formPush.identity = row.identity
        this.formPush.age = row.age
        this.formPush.remark = row.remark
        this.yuangongdata.managerId = row.managerId
        this.formPush.managerId = row.managerId
        this.formPush.id = row.id
        this.addDialog = true
       

      },
      daleteInfo(id) {

        let params = [
          id
        ]
        this.$confirm("确定要删除吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          xcdeleteInvestigators(params).then((res) => {
            //console.log("删除", res)
            if (res.data.ok) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getInit()
            } else {
              this.$message('删除失败')
            }
          })

        }).catch(() => {

        });

      },



      gettyyygList() {//人员列表
        // if(this.Addoredit == 2){
        //   this.formSearch1.name = this.formPush.name
        //   this.formSearch1.mobile = this.formPush.phone
        // }
        userListPage(this.formSearch1).then((res) => {
          //console.log(res)
          if (res.data.ok) {
            this.formData1 = res.data.data.records.filter((item) => {
              if (item.gmtCreate) {
                item.gmtCreate = this.$root.getDateArray(item.gmtCreate)[9]
              }
              return item
            })
            this.total3 = res.data.data.total
            // this.
            // if(this.Addoredit == 2){
            //     console.log(this.formPush.managerId);
            // }
          } else {
            this.$message(res.data.msg);
          }
          this.formSearch1.current= 1
        })
        this.xcryDialog = true;
      },
      changeRadiorow(row) {
        this.yuangongdata = row;

      },
      yuangongqd() {
        this.addDialog = false;
        this.xcryDialog = false;
        //console.log("你好");
        debugger
        //console.log("this.yuangongdata", this.yuangongdata);
        let data = this.yuangongdata;
        //console.log("data", data);
        let obj = JSON.parse(JSON.stringify(this.formPush))
        // this.managerId = data.id;
        // if (data.sex == 1) {
        //   data.sex = 0;
        // } else {
        //   data.sex = 1;
        // };
        this.bumendata = [
          {
            'name': data.orgName
          }
        ];
        this.formPush = {
          roleType: 1,
          projectId: obj.projectId,
          address: data.address,
          age: data.age,
          company: data.companyName,
          identity: data.idNumber,
          name: data.name,
          phone: data.phone,
          department: data.orgName,
          sex: data.sex,
          idNumberType: data.idNumberType,
          managerId:data.id,
          id : obj.id
        }
        
        this.addDialog = true;


        //console.log("AAAAAAAAAAA", this.formPush);
      },
      //新增
      addList(ywrylist) {
        console.log("============", this.formPush)
        //let obj = JSON.parse(JSON.stringify(this.formPush))
        this.$refs.ywrylist.validate((valid) => {
          //console.log("valid", valid)
          if (valid) {
            this.$confirm("确定执行此操作吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              console.log(this.formPush)
              if (this.Addoredit == 1) {
                delete this.formPush.id
                xcaddInvestigators(this.formPush).then((res) => {
                  //console.log("新增", res)
                  if (res.data.ok) {
                    this.addDialog = false
                    this.$message({
                      message: '添加成功',
                      type: 'success'
                    });
                    this.getlist();

                  } else {
                    this.$message('添加失败');
                  }
                  this.addDialog = false;
                })
              } else if (this.Addoredit == 2) {
                   
                xcupdInvestigators(this.formPush).then((res) => {
                  //console.log("新增", res)
                  if (res.data.ok) {
                    this.addDialog = false
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });
                    this.getlist();

                  } else {
                    this.$message('修改失败');
                  }
                  this.addDialog = false;
                })
                // console.log(this.formPush);
                //             this.$message('还没有修改接口！')
                //             this.addDialog = false
              }




            })

          } else {
            //console.log('error submit!!');
            return false;
          }
        });

      },
      handleChange1(value) {
        if (value.length != 0) {
          //console.log(value)
          //console.log(this.$refs.cascader1.getCheckedNodes()[0].data);
          if (this.$refs.cascader1.getCheckedNodes()[0].data.type != 1) {
            this.formSearch.department = this.$refs.cascader1.getCheckedNodes()[0].data.name
          } else {
            this.option2 = []
            this.formSearch.department = ''
            this.$message("只能选择部门")
          }

        } else {
          this.formPush.orgId = ''
        }
      },
      closeey() {
        this.xcryDialog = false;
        this.yuangongdata = {};
        //this.$refs.xclxlist.resetFields();
      },


      canceladd() {

        this.bumendata = [
          {
            'name': "外包"
          }
        ];
        this.formPush = {//表单
          roleType: 1,
          name: '',
          phone: '',
          identity: '',
          department: '',
          sex: '',
          idNumberType: '',
          projectId: '',
          department: '',
          company: '',
          address: '',
          age: '',
          managerId:'',
        }
        console.log("hahahah");
        this.addDialog = false
        this.Addoredit = 1
        this.$refs.ywrylist.resetFields();
      },
      //表格翻页多选
      getRowKeys: function (row) {
        return row.id;
      },
      toggleSelection4(val) {
        //console.log("xuanzhonsg", val);
        this.dynamicTags = [];
        for (var i = 0; i < val.length; i++) {
          this.dynamicTags.push(val[i]);//直接push表格数据对象，这样就可以方便将两个数据进行关联，如方法：handeleClose
        }
      },
      handleCurrentPage3(val) {//页码区域改变
        this.formSearch1.current = val
        this.gettyyygList()
      },



      getlist() {
        xcgetInvestigatorsList(this.formSearch).then((res) => {//巡查人员列表
          //console.log("巡查人员列表:", res)
          if (res.data.ok) {
            this.formData = res.data.data.records.filter((item) => {
              return item
            })
            this.total = res.data.data.total
          } else {
            this.$message(res.data.msg);
          }
        })
        let org_tree = {
          name: '',
          status: 1
        }
        orgTree(org_tree).then((res) => {//获取组织列表
          //console.log(res)
          if (res.data.ok) {
            this.dataTree = res.data.data
          }
        })
      },
      handleChange(value) {
        if (value.length != 0) {
          //console.log(value)
          this.formSearch1.orgId = this.$refs.cascader.getCheckedNodes()[0].data.id
        } else {
          this.formSearch1.orgId = ''
        }
      },
      getInit() {
        // this.getshiwuTypejieshu()
        this.getlist()
        // this.getworkOrderlist()
        xqSelectList({}).then((res) => {//项目选择列表
          //console.log("QQQQQQQQQQQ",res)
          if (res.data.ok) {
            this.xqTree = res.data.data
          }
        })
      },

      handleCurrentPage(val) {//页码改变
        this.formSearch.current = val
        this.getlist()
      },
    },
    mounted() {
      this.getInit()
    },
    updated() {
      // console.log(this.yuangongdata);
    },
    components: {
      paging,
      paging1
    }
  }
</script>
<style scoped>

</style>